<template>
	<view class="content">
		<u-navbar :autoBack="false" :bgColor="background">
			<template #left>
				<view class="">

				</view>
			</template>
		</u-navbar>
		<view class="bj"></view>
		<view class="txbox u-flex" @click="$z.gopage('/pagesall/grxx/grxx')">
			<view class="img">
				<u--image width="106rpx" height="106rpx" :src="$z.imgsrc(user.avatar)"></u--image>
			</view>
			<view class="text">
				<view class="name">
					{{user.username}}
				</view>
				<view class="utel">
					{{user.phone}}
				</view>
			</view>
			<view class="lin">
				<u-badge :value="value" :absolute="true" :offset="offset"></u-badge>
				<u--image width="28rpx" height="28rpx"
					:src="$z.imgsrc('e49583aa479244888978ca66028aef84.png')"></u--image>
			</view>
		</view>
		<view class="card" style="padding-bottom: 30rpx;">
			<view class="title u-flex u-flex-between">
				<view class="">
					运单管理
				</view>
				<view class="u-flex" @click="$z.gopage('/pagesall/order/order')">
					全部
					<u-icon name="arrow-right" size="24rpx"></u-icon>
				</view>
			</view>
			<view class="u-flex u-flex-around">
				<view class="ztitem" v-for="(item,key) in list" :key="key" @click="goorder(item.current)">
					<u--image width="92rpx" height="92rpx" :src="$z.imgsrc(item.src)"></u--image>
					<view class="text u-flex u-flex-center">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="listitem u-flex u-flex-between" @click="$z.gopage('/pagesall/order/order')">
				<view class="">
					运单管理
				</view>
				<view class="u-flex">
					<u-icon name="arrow-right" size="24rpx"></u-icon>
				</view>
			</view>
			<view class="listitem u-flex u-flex-between" @click="$z.gopage('/pagesall/plateNumber/plateNumber')">
				<view class="">
					我的车辆
				</view>
				<view class="u-flex">
					<u-icon name="arrow-right" size="24rpx"></u-icon>
				</view>
			</view>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				offset: [-3, -6],
				background: "#F2E7E0",
				value: 5,
				list: [{
						text: "待装车",
						src: "d94d9a70bdd1489abba5bf3da0b4aaff.png",
						current: "1",
					}, {
						text: "运送中",
						src: "5954227589e9432a899bb0fe08bd54df.png",
						current: "2",
					},
					//  {
					// 	text: "停发",
					// 	src: "cdb6cf01733c4b488f4aa0ed3eb96160.png"
					// }, 
					{
						text: "完成",
						src: "8b376e434d904d0a9bce3833110b18ba.png",
						current: "3",
					}
				]
			}
		},
		computed: {
			user() {
				return this.$store.state.user.user
			}
		},
		methods: {
			goorder(key) {
				this.$z.gopage("/pagesall/order/order?current=" + key)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;

		/* display: flex;
		flex-direction: column; */
		.bj {
			width: 100%;
			height: 346rpx;
			position: fixed;
			top: 80rpx;
			background: linear-gradient(to bottom, #F2E7E0, #F5F5F5);
		}

		.card {
			position: relative;
			background: #fff;
			border-radius: 20rpx;
			margin: 18rpx;

			.listitem {
				height: 106rpx;
				color: #181A1E;
				font-size: 28rpx;
				padding-left: 24rpx;
				padding-right: 36rpx;
				font-weight: 500;
				position: relative;

				&:nth-child(1) {
					&::after {
						content: "";
						position: absolute;
						left: 24rpx;
						right: 24rpx;
						background: #E7E7EC;
						height: 2rpx;
						bottom: 0;
						transform: scaleY(50%);
					}
				}
			}

			.title {
				padding: 38rpx 36rpx 32rpx 24rpx;
				font-size: 28rpx;
				color: #181A1E;
			}

			.ztitem {
				.text {
					font-size: 24rpx;
					height: 54rpx;
					text-align: center;
				}
			}
		}

		.txbox {
			position: relative;
			padding-left: 24rpx;
			height: 184rpx;

			.img {
				width: 106rpx;
				height: 106rpx;
				background: #fff;
				border-radius: 50%;
				overflow: hidden;
			}

			.text {
				padding-left: 22rpx;

				.name {
					font-size: 30rpx;
					color: #181A1E;
					padding-bottom: 14rpx;
				}

				.utel {
					color: #838C97;
					font-size: 24rpx;
				}
			}

			.lin {
				width: 56rpx;
				height: 56rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				border-radius: 50%;
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
</style>